<template>
	<view class="container" style="background-size: cover;background-position: center top;"
		:style="{backgroundImage:'url('+staticImgs.loading_bg_product+')'}">
		<navigationBar :emitBackEvent="true" @backEvent="backHandle" :my-property="navigationBarDataInfo" />
		<view v-for="(item,index) in loadSjList" :key="index" :class="['image-box']"
			:style="{left:item.left+'rpx',top:item.top+'rpx'}">
			<image :src="imgUrl+'/product/afterPay/load_'+index+'.png'" mode="" style="width: 100%;height: 100%;"></image>
		</view>
		<image :src="maiLunSex=='1'?staticImgs.loading_male_bg:staticImgs.loading_fmale_bg" mode="" class="male-bg"
			style="visibility: hidden;">
		</image>
		<view class="center-box">
			<view class="ml-title" style="visibility: hidden;">脉轮测验结果</view>
			<maiLunLoading :lineList="lineList" :isAnimation="true"></maiLunLoading>
			<view class="tip-bg flex-cc" :style="{backgroundImage:`url(${staticImgs.loading_tip_bg})`}">
				{{text[showTextIndex]}}
			</view>
		</view>
	</view>
</template>

<script>
	import navigationBar from "@/components/navigationBar/navigationBar.vue";
	import maiLunLoading from '@/components/mai-lun-loading/mai-lun-loading.vue'
	import {
		mapGetters
	} from 'vuex'

	export default {
		components: {
			navigationBar,
			maiLunLoading
		},
		props: {
			tit: {
				type: String,
				default: ''
			},
			isMBTI: {
				type: Boolean,
				default: false
			}
		},
		data() {
			return {
				imgUrl:this.$imgWxkjUrl,
				loadSjList: [{
						left: 0,
						top:391
					},
					{
						left: 0,
						top: 622
					},
					{
						left: 126,
						top: 759
					},
					{
						left: 309,
						top: 769
					},
					{
						left: 486,
						top: 727
					},
					{
						left: 554,
						top: 549
					},
					{
						left: 531,
						top: 352
					}
				],
				lineList: [{
						background: 'linear-gradient( 180deg, #FFBBC1 0%, #EB1F2D 100%)',
						height: 79,
						text: '海底轮',
						textE: 'Root'
					},
					{
						background: 'linear-gradient( 180deg, #FFF7EA 0%, #FA9F10 100%)',
						height: 258,
						text: '脐轮',
						textE: 'Sacral'
					},
					{
						background: 'linear-gradient( 180deg, #FFF9BF 0%, #E4D52F 100%)',
						height: 211,
						text: '太阳轮',
						textE: 'Navel'
					},
					{
						background: 'linear-gradient( 180deg, #E4FFE9 0%, #7AD58B 100%)',
						height: 121,
						text: '心轮',
						textE: 'Heart'
					},
					{
						background: 'linear-gradient( 180deg, #CFF4FF 0%, #49C2E8 100%)',
						height: 144,
						text: '喉轮',
						textE: 'Throat'
					},
					{
						background: 'linear-gradient( 180deg, #BFCAFF 0%, #435BD4 100%)',
						height: 180,
						text: '眉心轮',
						textE: 'Third Eye'
					},
					{
						background: 'linear-gradient( 180deg, #FDFCFF 0%, #FDDAFC 100%)',
						height: 96,
						text: '顶轮',
						textE: 'Crown'
					}
				],
				maiLunSex: 0,
				navigationBarDataInfo: {
					"bg_color": "transparent",
					"color": "#fff",
					"flag": 4,
					"name": "",
					"hasEntity": false,
				},
				staticImgs: {
					loading_male_bg: this.$imgWxkjUrl + '/product/question/loading_male_bg.png',
					loading_fmale_bg: this.$imgWxkjUrl + '/product/question/loading_fmale_bg.png',
					loading_tip_bg: this.$imgWxkjUrl + '/product/question/loading_tip_bg_new.png',
					loading_bg_product: this.$imgWxkjUrl + '/product/question/loading_bg_product_new.png'
				},
				text: ['结果导入中', '各脉轮情况计算中', '脉轮生成中', '完成'],
				interval: null,
				timeout: null,
				showTextIndex: 0
			}
		},
		computed: {
			...mapGetters('user', ['uGender'])
		},
		mounted() {
			this.maiLunSex = this.uGender || 0
			this.interval = setInterval(() => {
				if (this.showTextIndex < 3) {
					this.showTextIndex++
				}
			}, 1600)
			this.timeout = setTimeout(() => {
				this.updateBarStatus()
			}, 5000)
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: '#000000'
			})
		},
		beforeDestroy() {
			uni.setNavigationBarColor({
				frontColor: '#000000',
				backgroundColor: '#ffffff'
			})
			clearTimeout(this.timeout)
			clearInterval(this.interval)
		},
		methods: {
			backHandle() {
				uni.reLaunch({
					url: '/pages/sclList/sclList'
				})
			},
			updateBarStatus() {
				this.$emit('loadOk')
			}
		},
	}
</script>

<style lang="scss" scoped>
	.image-box{
		width: 210rpx;
		height: 210rpx;
		position: absolute;
		opacity: 0;
	}
	.tip-bg {
		width: 385rpx;
		height: 90rpx;
		background-size: 100% 100%;
		font-weight: bold;
		font-size: 34rpx;
		color: #FFFFFF;
		margin: 0 auto;
		margin-top: 49rpx;
		letter-spacing: 2rpx;
	}

	.ml-title {
		width: 100%;
		font-weight: bold;
		font-size: 45rpx;
		color: #FFFFFF;
		text-align: center;
		margin-bottom: 59rpx;
	}

	.center-box {
		position: relative;
		margin-top: -310rpx;
	}

	.male-bg {
		width: 100%;
		height: 1200rpx;
		display: block;
	}
	
	
	 /* 浮现动画 */
	        @keyframes fadeIn {
	            0% { opacity: 0; transform: translateY(20rpx); }
	            100% { opacity: 1; transform: translateY(0); }
	        }
	        
	        /* 上下浮动动画 */
	        @keyframes float {
	            0% { transform: translateY(0px); }
	            50% { transform: translateY(-15rpx); }
	            100% { transform: translateY(0px); }
	        }
	        
	        /* 为每个图片设置不同的动画延迟 */
	        .image-box:nth-child(1) {
	            animation: fadeIn 0.8s ease-out forwards, float 3s ease-in-out infinite 0.8s;
	        }
	        .image-box:nth-child(2) {
	            animation: fadeIn 0.8s ease-out 0.2s forwards, float 3s ease-in-out infinite 1s;
	        }
	        .image-box:nth-child(3) {
	            animation: fadeIn 0.8s ease-out 0.4s forwards, float 3s ease-in-out infinite 1.2s;
	        }
	        .image-box:nth-child(4) {
	            animation: fadeIn 0.8s ease-out 0.6s forwards, float 3s ease-in-out infinite 1.4s;
	        }
	        .image-box:nth-child(5) {
	            animation: fadeIn 0.8s ease-out 0.8s forwards, float 3s ease-in-out infinite 1.6s;
	        }
	        .image-box:nth-child(6) {
	            animation: fadeIn 0.8s ease-out 1s forwards, float 3s ease-in-out infinite 1.8s;
	        }
	        .image-box:nth-child(7) {
	            animation: fadeIn 0.8s ease-out 1.2s forwards, float 3s ease-in-out infinite 2s;
	        }
			.image-box:nth-child(8) {
			    animation: fadeIn 0.8s ease-out 1.4s forwards, float 3s ease-in-out infinite 2.2s;
			}
</style>